<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link rel="shortcut icon" type="image/png" href="../img/favicon.png">
        <title></title>

        

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="../css/main.css">
        <link rel="stylesheet" href="../css/jsplumb-doc.css">

    </head>
    <body>
        <div class="navbar navbar-top navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="/"><img src="../../img/logo-medium-jsplumb.png"></a>
            <div class="community"></div>

        </div>

        <div class="navbar-collapse collapse nav-wrapper">
            <ul class="nav navbar-nav">
                <li><a href="../">DEMOS</a></li>
                <li><a href="../doc/home.html">DOCS</a></li>
                <li><a href="../apidocs/index.html">API</a></li>
                <li><a href="../download">DOWNLOAD</a></li>
                <li><a href="http://beta.jsplumbtoolkit.com/contact.html">CONTACT</a></li>
                <li><a href="https://blog.jsplumbtoolkit.com">BLOG</a></li>

            </ul>

            <div class="social-nav hidden-xs">
                <a href="http://twitter.com/jsplumblib" class="link"><span class="icon-twitter"></span></a>
                <a href="http://github.com/sporritt/jsplumb/" class="link"><span class="icon-github"></span></a>
                <a href="http://www.linkedin.com/company/jsplumb" class="link"><span class="icon-linkedin"></span></a>

            </div>
        </div><!--/.nav-collapse -->
    </div>
</div>

        <div class="container padding-top">
            <div class="row" id="docs">
                <div class="docs-nav col-xs-3" tabindex="0">
                    <ul>
<li><a href="changelog.html">Changelog</a></li>
<li>Required imports and basic setup<ul>
<li><a href="home.html#browser">Browser Compatibility</a></li>
<li><a href="home.html#setup">Setup</a></li>
<li><a href="home.html#doctype">Doctype</a></li>
<li><a href="home.html#imports">Required Imports</a></li>
<li><a href="home.html#initializing">Initializing jsPlumb</a></li>
<li><a href="home.html#multiple">Multiple jsPlumb Instances</a></li>
<li><a href="home.html#zindex">Z-Index Considerations</a></li>
<li><a href="home.html#container">Where does jsPlumb add elements?</a></li>
<li><a href="home.html#dragging">Element Dragging</a></li>
<li><a href="home.html#performance">Performance</a></li>
<li><a href="zooming.html">Zooming</a></li>
</ul>
</li>
<li><a href="defaults.html">Configuring Defaults</a></li>
<li><a href="basic-concepts.html">Basic Concepts</a><ul>
<li><a href="anchors.html">Anchors</a></li>
<li><a href="connectors.html">Connectors</a></li>
<li><a href="endpoints.html">Endpoints</a></li>
<li><a href="overlays.html">Overlays</a></li>
</ul>
</li>
<li><a href="connections.html">Establishing Connections</a><ul>
<li><a href="connections.html#programmatic">Programmatic Connections</a></li>
<li><a href="connections.html#common">Reusing Common Settings</a></li>
<li><a href="connections.html#detaching">Detaching Programmatic Connections</a></li>
<li><a href="connections.html#draganddrop">Drag and Drop Connections</a></li>
<li><a href="connections.html#sourcesandtargets">Elements as sources &amp; targets</a></li>
<li><a href="connections.html#maketarget">Element Targets</a></li>
<li><a href="connections.html#makesource">Element Sources</a></li>
<li><a href="connections.html#sourcefilter">Specifying drag source area</a></li>
</ul>
</li>
<li><a href="removing.html">Removing Connections/Endpoints</a></li>
<li><a href="parameters.html">Connection &amp; Endpoint Parameters</a></li>
<li><a href="types.html">Connection &amp; Endpoint Types</a></li>
<li><a href="events.html">Events</a><ul>
<li><a href="interceptors.html">Interceptors</a></li>
</ul>
</li>
<li>Appearance<ul>
<li><a href="paint-styles.html">Styling via Paint Styles</a></li>
<li><a href="styling-via-css.html">Styling via CSS</a></li>
</ul>
</li>
<li><a href="querying.html">Querying jsPlumb</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="utilities.html">Utility Functions</a></li>
<li><a href="loader-support.html">Loader Support (RequireJS)</a></li>
<li>Examples<ul>
<li><a href="connect-examples.html">jsPlumb.connect</a></li>
<li><a href="draggable-connections-examples.html">Draggable Connections</a></li>
<li><a href="miscellaneous-examples.html">Miscellaneous</a></li>
</ul>
</li>
<li>Development<ul>
<li><a href="development.html">Which files are which?</a></li>
<li><a href="Build.html">Building jsPlumb</a></li>
<li><a href="development-documentation.html">Documentation while developing</a></li>
</ul>
</li>
</ul>
                </div>
                <div class="markdown-body col-xs-9">
                    <h3>Interceptors</h3>

<p>Interceptors are basically event handlers from which you can return a value that tells jsPlumb to abort what it is that it was doing.  There are four interceptors supported - <code>beforeDrop</code>, which is called when the user has dropped a Connection onto some target, <code>beforeDetach</code>, which is called when the user is attempting to detach a Connection (by dragging it off one of its Endpoints and dropping in whitespace), <code>beforeDrag</code>, which is called when the user begins to drag a Connection, and <code>beforeStartDetach</code>, which is when the user has just begun to drag an existing Connection off of one of its Endpoints (compared with <code>beforeDetach</code>, in which the user is allowed to drag the Connection off).</p>

<p>Interceptors can be registered via the <code>bind</code> method on an instance of jsPlumb just like any other event listeners, and they can also be passed in to the <code>addEndpoint</code>, <code>makeSource</code> and <code>makeTarget</code> methods.  </p>

<p>Note that binding <code>beforeDrop</code> (as an example) on a jsPlumb instance itself is like a catch-all: it will be called every time a Connection is dropped on <em>any</em> Endpoint, unless that Endpoint has its own <code>beforeDrop</code> interceptor. But passing a beforeDrop callback into an Endpoint constrains that callback to just the Endpoint in question.       </p>

<h4>beforeDrop</h4>

<p>This event is fired when a new or existing connection has been dropped. Your callback is passed a JS object with these fields:</p>

<ul>
<li><strong>sourceId</strong> - the id of the source element in the connection</li>
<li><strong>targetId</strong> - the id of the target element in the connection</li>
<li><strong>scope</strong> - the scope of the connection</li>
<li><strong>connection</strong> - the actual Connection object.  You can access the &#39;endpoints&#39; array in a Connection to get the Endpoints involved in the Connection, but be aware that when a Connection is being dragged, one of these Endpoints will always be a transient Endpoint that exists only for the life of the drag. To get the Endpoint on which the Connection is being dropped, use the &#39;dropEndpoint&#39; member.</li>
<li><strong>dropEndpoint</strong> - this is the actual Endpoint on which the Connection is being dropped.  This <strong>may be null</strong>, because it will not be set if the Connection is being dropped on an element on which makeTarget has been called. </li>
</ul>

<p>If you return false (or nothing) from this callback, the new Connection is aborted and removed from the UI.</p>

<h4>beforeDetach</h4>

<p>This is called when the user has detached a Connection, which can happen for a number of reasons: by default, jsPlumb allows users to drag Connections off of target Endpoints, but this can also result from a programmatic &#39;detach&#39; call.  Every case is treated the same by jsPlumb, so in fact it is possible for you to write code that attempts to detach a Connection but then denies itself!  You might want to be careful with that. </p>

<p>Note that this interceptor is passed the actual Connection object; this is different from the beforeDrop interceptor discussed above: in this case, we&#39;ve already got a Connection, but with beforeDrop we are yet to confirm that a Connection should be created.</p>

<p>Returning false - or nothing - from this callback will cause the detach to be abandoned, and the Connection will be reinstated or left on its current target.</p>

<h4>beforeDrag</h4>

<p>This is called when the user starts to drag a new Connection.  These parameters are passed to the function you provide:</p>

<ul>
<li><strong>endpoint</strong> the Endpoint from which the user is dragging a Connection</li>
<li><strong>source</strong> the DOM element the Endpoint belongs to</li>
<li><strong>sourceId</strong> the ID of the DOM element the Endpoint belongs to</li>
</ul>

<p><code>beforeDrag</code> operates slightly differently to the other interceptors: it is still the case that returning false from your interceptor function will abort the current activity - in this case cancelling the drag - but  you can also return an object from your interceptor, and this object will be passed in as the <code>data</code> parameter in the constructor of the new Connection:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jsPlumbInstance</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;beforeDrag&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">params</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="p">{</span>
   <span class="nx">foo</span><span class="o">:</span><span class="s2">&quot;bar&quot;</span>
  <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p>This is particularly useful if you have defined any <a href="types#parameterized-connection-type">parameterized connection types</a>. With this mechanism you can arrange for a newly dragged Connection to be populated with data of your choice.</p>

<p><strong>Note</strong> all versions of jsPlumb prior to 1.7.6 would fire <code>beforeDetach</code> for both new Connection drags and also 
dragging of existing Connections. From 1.7.6 onwards this latter behaviour has been moved to the 
<code>beforeStartDetach</code> interceptor.</p>

<h4>beforeStartDetach</h4>

<p>This is called when the user starts to drag an existing Connection.  These parameters are passed to the function you provide:</p>

<ul>
<li><strong>endpoint</strong> the Endpoint from which the user is dragging a Connection</li>
<li><strong>source</strong> the DOM element the Endpoint belongs to</li>
<li><strong>sourceId</strong> the ID of the DOM element the Endpoint belongs to</li>
<li><strong>connection</strong> The Connection that is about to be dragged.</li>
</ul>

<p>Returning false from <code>beforeStartDetach</code> prevents the Connection from being dragged.</p>

                </div>
            </div>
        </div>

        <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-49979015-1', 'auto');
    ga('send', 'pageview');

</script>


    </body>
</html>
